<!--
 * @Description: 仪表盘(多色)
 * @Author: xjc
 * @Date: 2022-06-21 15:02:51
 * @LastEditTime: 2022-06-21 15:09:28
 * @LastEditors: xjc
-->
<template>
  <div id="gauge-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Gauge} = G2Plot

onMounted(() => {
  const gauge = new Gauge('gauge-container', {
    percent: 0.75,
    range: {
      ticks: [0, 1 / 3, 2 / 3, 1],
      color: ['#F4664A', '#FAAD14', '#30BF78'],
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    statistic: {
      content: {
        style: {
          fontSize: '36px',
          lineHeight: '36px',
        }
      }
    }
  })

  gauge.render()
})
</script>
